<template>
  <main class="home-page" @wheel.passive="handleWheel">
    <header class="header" ref="navHeader">
      <user-info />
      <nav-bar class="ml-auto" />
    </header>
    <section class="article-center">
      <router-view />
    </section>
  </main>
</template>

<script setup lang="ts">
import UserInfo from './components/user-info.vue';
import NavBar from './components/nav-bar.vue';
import { useTemplateRef } from 'vue';

const navHeader = useTemplateRef('navHeader') as Ref<HTMLDivElement>;

const handleWheel = (event: WheelEvent) => {
  if (event.deltaY > 0) {
    navHeader.value?.classList.add('shadow');
  } else {
    navHeader.value?.classList.remove('shadow');
  }
};
</script>
<style scoped lang="scss">
.home-page {
  @apply h-fit bg-[#121212];
  .header {
    opacity: 1;
    transition: opacity 0.3s;
    @apply sticky top-0 z-10 flex flex-wrap gap-2 w-full py-4 px-10 bg-black overflow-hidden;
  }
  .shadow {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .article-center {
    @apply bg-[#121212] min-h-screen;
    background-image: -webkit-gradient(
      linear,
      100% 100%,
      0% 0%,
      from(transparent),
      color-stop(0.25, transparent),
      color-stop(0.25, hsla(0, 0%, 100%, 0.12)),
      color-stop(0.5, hsla(0, 0%, 100%, 0.12)),
      color-stop(0.5, transparent),
      color-stop(0.75, transparent),
      color-stop(0.75, hsla(0, 0%, 100%, 0.12)),
      to(hsla(0, 0%, 100%, 0.12))
    );
  }
}
</style>
